<script setup lang="ts">
import { computed } from 'vue';
import { darkTheme, lightTheme} from 'naive-ui';
import { naiveLocales, naiveDateLocales } from '@/locales/naive';
import { useAppStore } from '@/store/modules/app';
import { useThemeStore } from '@/store/modules/theme';

const appStore = useAppStore();
const themeStore = useThemeStore();

const naiveLocal = computed(() => {
  return naiveLocales[appStore.locale];
});
const naiveDateLocal = computed(() => {
  return naiveDateLocales[appStore.locale];
});
const naiveDarkTheme = computed(() => {
  return themeStore.themeScheme === 'dark' ? darkTheme : lightTheme;
});
</script>

<template>
  <Suspense>
    <NConfigProvider
        class="w-full"
        :locale="naiveLocal"
        :date-locale="naiveDateLocal"
        :theme="naiveDarkTheme"
        :theme-overrides="themeStore.naiveTheme"
    >
      <AppProvider>
        <RouterView class="bg-layout" />
      </AppProvider>
    </NConfigProvider>
  </Suspense>
</template>

<style scoped>

</style>
